<script setup lang="ts">
import { useStore } from '../../store';
const store = useStore();
// 默认选择无道具
function handleSelect(row?: any) {
  store.updateMaterial(row || {}); // 不选就存空
}
</script>

<template>
  <div class="list">
    <div class="list-head p-4 pt-6">选择道具</div>
    <NScrollbar class="list-main">
      <ul class="px-4">
        <li
          :class="{ active: !store.getMaterialId() }"
          class="item-card square flex-center select-none"
          @click="handleSelect()"
        >
          <SvgIcon class="text-20 text-base_text/60" icon="mdi:cancel"></SvgIcon>
        </li>
        <li
          v-for="item in store.getDict('material')"
          :key="item.id"
          :class="{ active: store.getMaterialId() === item.id }"
          class="item-card square flex-center select-none"
          @click="handleSelect(item)"
        >
          <img class="max-h-full object-contain" :src="item.url" />
        </li>
      </ul>
    </NScrollbar>
  </div>
</template>

<style scoped lang="scss"></style>
